<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody">
			<view>
				<topic-info :item="topicInfo"></topic-info>
			</view>
			<graceNavBar
				class="nav-bar grace-margin-top"
				:items="tabs"
				:isCenter="true"
				activeLineRadius="20rpx"
				activeDirection="center"
				textAlign="center"
				color="#969696"
				lineHeight="40rpx"
				:size="350"
				activeLineWidth="70rpx"
				activeLineHeight="10rpx"
				activeLineBg="#FEDE33"
				:currentIndex="currentIndex"
				@change="navChange"
			></graceNavBar>
			<view>
				<block v-for="(news, newsIndex) in newsList" :key="newsIndex">
					<template v-if="currentIndex == newsIndex">
						<view class="empty-view grace-flex-center grace-flex-vcenter grace-animate fadeIn" v-if="news.list.length === 0">
							<image class="empty-img" mode="widthFix" src="../../static/image/nothing.png"></image>
						</view>
						<block v-for="(item, index) in news.list" :key="index">
							<news-list :item="item"></news-list>
						</block>
						<graceLoading :loadingType="news.loadingType"></graceLoading>
					</template>
				</block>
			</view>
		</view>
	</gracePage>
</template>

<script>
	export default {
		props:{
			
		},
		data() {
			return {
				currentIndex: 0,
				newData: [
					{
						userAvatar: '../../static/demo/userpic/8.jpg',
						username: '涛哥哥',
						sex: 0, //0 男 1女
						age: 25,
						isFollow: false,
						title: '我是标题啦啦啦啦',
						video: false, //video
						share: false,
						address: '深圳 龙岗',
						pic: '',
						playNum: '20w',
						duration: '2:47',
						likeNum: 11,
						commentNum: 10,
						shareNum: 10
					},
					{
						userAvatar: '../../static/demo/userpic/8.jpg',
						username: '涛哥哥',
						sex: 0, //0 男 1女
						age: 25,
						isFollow: false,
						title: '我是标题啦啦啦啦',
						video: false, //video
						share: false,
						address: '深圳 龙岗',
						pic: '',
						playNum: '20w',
						duration: '2:47',
						likeNum: 11,
						commentNum: 10,
						shareNum: 10
					}
				],
				newsList: [
					{
						loadingType:3,
						page :1,
						list:[
							{
								userAvatar: '../../static/demo/userpic/8.jpg',
								username: '涛哥哥',
								sex: 0, //0 男 1女
								age: 25,
								isFollow: false,
								title: '我是标题啦啦啦啦',
								video: false, //video
								share: false,
								address: '深圳 龙岗',
								pic: '',
								playNum: '20w',
								duration: '2:47',
								likeNum: 11,
								commentNum: 10,
								shareNum: 10
							},
							{
								userAvatar: '../../static/demo/userpic/8.jpg',
								username: '涛哥哥',
								sex: 0, //0 男 1女
								age: 25,
								isFollow: false,
								title: '我是标题啦啦啦啦',
								video: false, //video
								share: false,
								address: '深圳 龙岗',
								pic: '../../static/demo/datapic/12.jpg',
								playNum: '20w',
								duration: '2:47',
								likeNum: 11,
								commentNum: 10,
								shareNum: 10
							},
							{
								userAvatar: '../../static/demo/userpic/10.jpg',
								username: '涛哥哥',
								sex: 1, //0 男 1女
								age: 33,
								isFollow: false,
								title: '我是标题啦啦啦啦',
								video: {
									playNum: '20w',
									duration: '2:47'
								}, //video
								share: false,
								address: '深圳 龙岗',
								pic: '../../static/demo/datapic/12.jpg',
								likeNum: 11,
								commentNum: 10,
								shareNum: 10
							},
							{
								userAvatar: '../../static/demo/userpic/10.jpg',
								username: '涛哥哥',
								sex: 1, //0 男 1女
								age: 28,
								isFollow: false,
								title: '我是标题啦啦啦啦',
								video: false, //video
								share: {
									title: '分享分享',
									pic: '../../static/demo/datapic/1.jpg'
								},
								address: '深圳 龙岗',
								pic: '',
								playNum: '20w',
								duration: '2:47',
								likeNum: 11,
								commentNum: 10,
								shareNum: 10
							}
						]
					},
					{
						loadingType:3,
						page :1,
						list:[
							{
								userAvatar: '../../static/demo/userpic/8.jpg',
								username: '涛哥哥',
								sex: 0, //0 男 1女
								age: 25,
								isFollow: false,
								title: '我是标题啦啦啦啦',
								video: false, //video
								share: false,
								address: '深圳 龙岗',
								pic: '../../static/demo/datapic/12.jpg',
								playNum: '20w',
								duration: '2:47',
								likeNum: 11,
								commentNum: 10,
								shareNum: 10
							},
							{
								userAvatar: '../../static/demo/userpic/10.jpg',
								username: '涛哥哥',
								sex: 1, //0 男 1女
								age: 33,
								isFollow: false,
								title: '我是标题啦啦啦啦',
								video: {
									playNum: '20w',
									duration: '2:47'
								}, //video
								share: false,
								address: '深圳 龙岗',
								pic: '../../static/demo/datapic/12.jpg',
								likeNum: 11,
								commentNum: 10,
								shareNum: 10
							},
							{
								userAvatar: '../../static/demo/userpic/10.jpg',
								username: '涛哥哥',
								sex: 1, //0 男 1女
								age: 28,
								isFollow: false,
								title: '我是标题啦啦啦啦',
								video: false, //video
								share: {
									title: '分享分享',
									pic: '../../static/demo/datapic/1.jpg'
								},
								address: '深圳 龙岗',
								pic: '',
								playNum: '20w',
								duration: '2:47',
								likeNum: 11,
								commentNum: 10,
								shareNum: 10
							}
						]
					}
				],
				tabs: ['默认', '最新'],
				topicInfo:{
					title: '你亲身经历的灵异事件',
					pic: '../../static/demo/topicpic/14.jpeg',
					desc: '面试官：在电梯里巧遇马云你会做什么？90后女孩的回答当场被录用',
					totalNum: 545,
					todayNum: 720
				}
			}
		},
		onReady() {
			this.getCate();
		},
		
		onReachBottom() {
			// 判断加载状态避免多次滚动时有加载尚未完成
			if (this.newslist[this.currentIndex].loadingType === 2 || this.newslist[this.currentIndex].loadingType === 4) {
				return false;
			}
			this.loadMore();
		},
		//下拉刷新
		onPullDownRefresh() {
			setTimeout(()=>{
				uni.stopPullDownRefresh();
			},2000);
		},
		methods: {
			navChange(index) {
				this.currentIndex = index;
			},
			getCate() {
				
			},
			//加载更多时执行的函数
			loadMore() {
				let item = this.newsList[this.currentIndex];
				item.loadingType = 1;
				//追加数据(延迟1秒 模拟网络请求)
				setTimeout(() => {
					if (item.page > 3) {
						item.loadingType = 2;
						return;
					}
			
					item.list = item.list.concat(this.newData);
			
					// 页码增加
					item.page++;
					setTimeout(() => {
						item.loadingType = 3;
					}, 300);
				}, 1000);
			}
		}
	}
</script>

<style lang="stylus">
.nav-bar
	line-height 80rpx
	height 80rpx
.empty-view
	background #FFFFFF
	position absolute
	top 0
	bottom 0
	left 0
	right 0
	.empty-img
		width 40%
</style>
